<template>
    <div class="balance">
        <div class="list" v-if="promotionList.length > 0">
            <div class="item flex-a flex-b" v-for="item in promotionList" :key="item">
                <div class="left">
                    <div>{{ item.balance_num }}</div>
                </div>
                <div class="time">{{ item.created_at }}</div>
                <div class="right">{{ item.type == 0 ? '+' : item.type == 1 ? '-' : '' }}</div>
            </div>
        </div>
        <nut-empty description="无数据" v-else></nut-empty>
    </div>
</template>

<script lang="ts">
import Taro, { useRouter } from '@tarojs/taro';
import { Left } from '@nutui/icons-vue-taro';
import { reactive, toRefs, onMounted } from 'vue';
import { getBalance } from '../../../../api/index';
export default {
    components: {
        Left,
    },
    setup() {
        const data = reactive({
            promotionList: [],
            user: {}
        });

        onMounted(() => {
            Taro.getStorage({
                key: 'user',
                success: function (res) {
                    data.user = res.data
                    getList()
                }
            })
        });
        const jumpTo = (path) => {
            Taro.navigateTo({ url: path })
        }
        const getList = () => {
            getBalance({ orderNo: '', userId: data.user.uuid, type: '' }).then(res => {
                if (res.code == 0) {
                    data.promotionList = res.data.list
                }
            })
        }
        return {
            ...toRefs(data), jumpTo, getList
        }
    }
};
</script>


<style lang="scss">
.balance {
    .list {
        padding-top: 50rpx;

        .item {
            border-bottom: 1rpx solid #F9F9F9;
            padding: 20rpx 0;
            font-size: 20rpx;
            color: #000;

            .left {
                span {
                    display: inline-block;
                    font-size: 26rpx;
                }
            }

            .right {
                color: red;
                font-weight: bold;
            }
        }
    }
}
</style>